<template>
  <div class="header">
    <div class="search">
      <input class="search-input" placeholder="请输入" type="text"/>
      <div class="search-btn button-tr-br-radius">
        <a href="javascript:void(0)">搜索</a>
      </div>
      <span class="shouqi">
           <a href="javascript:void(0)" v-on:click="showCont"><span>收起  &emsp; △</span></a>
      </span>
    </div>

    <div class="select-box">
      <div class="select-box-first">
      <div class="select-label">
        <label>其他选项：展示状态：</label>
      </div>
      <div>
        <select id="state" class="choose-box"  v-model="selectStateValue" @change="getStateSelected">
          <option :value="state.value" v-for="state in stateList" >{{state.name}}</option>
        </select>
      </div>
      </div>

      <div ><button class="search-btn button-radius addDoc" @click="toAddDoctor" >新增医生信息</button></div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "ServiceTeamHeader",
        data() {
            return{
                selectStateValue: '',
                stateList:[
                    {
                        value:'showing',
                        name:'展示中'
                    },
                    {
                        value:'offline',
                        name:'已下架'
                    }
                ]
            };
        },
        methods:{
            toAddDoctor: function () {
                this.$router.push({name:'AddDoctor'});
            },
            getStateSelected(){
                //获取选中的优惠券
                console.log(this.selectStateValue);
            }
        },
        created(){
            this.selectStateValue = this.stateList[0].value;
        },
    }
</script>

<style scoped>

  .header {
    width: 80%;
    margin: 0 auto;
    padding: 0 auto;
    margin-top: 1em;
  }
  .search {
    width: 100%;
    border-bottom: 0.6px #666666 dashed;
    margin-bottom: 15px;
    display: flex;
  }

  .search > input {
    float: left;
    margin-bottom: 15px;
  }

  .search > div {
    float: left;
    margin-bottom: 15px;
  }

  .search-input {
    width: 250px;
    height: 30px;
    line-height: 1.3;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    color: rgba(0, 0, 0, .85);
    border-radius: 2px;
    border-color: #eee;
    outline: none;
    display: block;
    padding-left: 10px;

  }

  .button-tr-br-radius {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .search-btn {
    text-align: center;
    line-height: 30px;
    background-color: #D60000;
    height: 30px;
    padding: 0 15px 0 15px;
    color: white;
  }

  .search-btn > a {
    text-decoration: none;
    color: white;
    display: block;
    font-size: 10px;
  }

  .shouqi {
    flex: 1;
  }

  .shouqi > a {
    float: right;
    text-decoration: none;
    color: #D60000;
  }

  .select-box {
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
  }

  .select-box-first{
    margin-top: 1em;
    display: flex;
    align-items: center;
  }

  .select-label {

  }

  .choose-box{
    width: 250px;
    height: 30px;
    line-height: 1.3;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    color: rgba(0, 0, 0, .85);
    border-radius: 2px;
    border-color: #eee;
    outline: none;
    display: block;
    padding-left: 10px;
  }

  .choose-box > option:hover{

  }

  .input-number > div > input {
    width: 100%;
    height: 25px;
    font-size: 25px;

    line-height: 1.3;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    color: rgba(0, 0, 0, .85);
    border-radius: 2px;
    border-color: #eee;
    box-shadow: #666 0px 0px 4px;
    padding-left: 5px;
    outline: none;
    display: block;
  }

  .button-radius {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .addDoc{
    width: 20%;
    margin-top: 1em;
    left: 5px;
    cursor: pointer;
  }



</style>
